<template>
	<view class="container">
		<web-view :src="htmlUrl" :style="{ height: '100vh', width: '100%' }"
			@message="onMessage"
			@load="webviewOnLoad"
			id="webview"></web-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app' // 新增引入

	// 假设你需要传递一个参数，设置 URL 参数
	let htmlUrl = ref('https://www.zxsl.zxmap.cn/jsMind');
	// let htmlUrl = ref('http://192.168.110.112:5500/index.html');
	// let htmlUrl = ref('https://witutu.github.io/mindMap');
	const mindData = ref()
	const taskId = ref(null)
	const userId = ref(null)
	let webViewContext = null; // 存储 webview 上下文

	// 添加 webviewOnLoad 处理函数
	const webviewOnLoad = (e) => {
		console.log('WebView 加载完成');
	}

	const onMessage = (e) => {
		console.log('✅ 收到 H5 消息:', e.detail);
		
		try {
			// 统一消息数据获取
			const data = e.detail.data;
			if (!data) {
				console.warn('⚠️ 消息数据为空');
				return;
			}
			
			console.log('📄 消息数据类型:', data.type, '格式:', data.format);
			if (data.mindData) {
				console.log('📊 数据大小:', (data.mindData.length/1024/1024).toFixed(2) + 'MB');
			}
			
			// 处理消息
			switch (data.type) {
				case 'init':
					// 处理初始化消息
					console.log('📱 H5页面初始化完成:', data.msg);
					break;
					
				case 'test':
					console.log('🧪 收到测试消息:', data.msg);
					uni.showToast({
						title: '测试消息收到',
						icon: 'success',
						duration: 2000
					});
					break;
					
				case 'export':
					console.log('🎯 处理导出消息 (postMessage):', data.format);
					// 🔥 直接处理 postMessage 的导出数据
					handleExportFromPostMessage(data);
					break;
					
				default:
					console.warn('⚠️ 未知的消息类型:', data.type || '无类型');
			}
		} catch (error) {
			console.error('❌ 处理消息时发生错误:', error);
			uni.showToast({
				title: '处理消息失败',
				icon: 'error',
				duration: 2000
			});
		}
	}

	// 🔥 处理来自 postMessage 的导出数据
	const handleExportFromPostMessage = async (data) => {
		try {
			console.log('开始处理 postMessage 导出数据...');
			
			let message = '';
			if (data.format === 'pdf') {
				console.log('🔄 处理PDF导出 (postMessage)...');
				message = await exportAsPDF(data.mindData);
			} else if (data.format === 'image') {
				console.log('🔄 处理图片导出 (postMessage)...');
				message = await exportAsImage(data.mindData);
			} else {
				throw new Error('未知的导出格式: ' + data.format);
			}
			
			// 显示成功提示
			uni.showToast({
				title: message || '导出成功',
				icon: 'success',
				duration: 3000
			});
			
			console.log('✅ postMessage 导出完成:', message);
			
		} catch (error) {
			console.error('❌ postMessage 导出失败:', error);
			uni.showToast({
				title: '导出失败: ' + error.message,
				icon: 'error',
				duration: 3000
			});
		}
	}

	const requestAlbumAuthorize = () => {
		return new Promise((resolve, reject) => {
			uni.getSetting({
				success(res) {
					if (res.authSetting['scope.writePhotosAlbum']) {
						// 已授权
						resolve()
					} else {
						// 请求授权
						uni.authorize({
							scope: 'scope.writePhotosAlbum',
							success() {
								resolve()
							},
							fail() {
								// 用户拒绝授权，弹窗引导
								uni.showModal({
									title: '授权提示',
									content: '需要授权访问相册权限，才能保存图片，请前往设置打开权限。',
									showCancel: false,
									success() {
										reject(new Error('无权限保存图片'))
									}
								})
							}
						})
					}
				},
				fail(err) {
					reject(err)
				}
			})
		})
	}


	const exportAsPDF = (pdfBase64Data) => {
			console.log('导出为Pdf');
			
			const base64 = pdfBase64Data.replace(/^data:application\/pdf;base64,/, '');
			const buffer = wx.base64ToArrayBuffer(base64);

			const fileName = `mindmap_${Date.now()}.pdf`;
			const filePath = `${wx.env.USER_DATA_PATH}/${fileName}`;

			const fs = wx.getFileSystemManager();
			fs.writeFile({
				filePath,
				data: buffer,
				encoding: 'binary',
				success: () => {
					console.log('✅ 已保存到:', filePath);

					// 👉 可直接打开 PDF
					wx.openDocument({
						filePath,
						fileType: 'pdf',
						success: () => {
							uni.showToast({
								title: '打开 PDF 成功',
								icon: 'success'
							});
						},
						fail: (err) => {
							console.error('❌ 打开 PDF 失败:', err);
							uni.showToast({
								title: '打开 PDF 失败',
								icon: 'none'
							});
						}
					});

					// ❗️如果想长期保存，可用 wx.saveFile:
					// wx.saveFile({
					//   tempFilePath: filePath,
					//   success: (res) => {
					//     console.log('永久保存路径:', res.savedFilePath);
					//   }
					// });

				},
				fail: (err) => {
					console.error('❌ 写文件失败:', err);
					uni.showToast({
						title: '保存失败',
						icon: 'error'
					});
				}
			});
	}

	const exportAsImage = async (base64Data) => {
		console.log('导出为图片');
		try {
			// #ifdef MP-WEIXIN
			// 先请求权限
			await requestAlbumAuthorize()
			// #endif
			// 去掉 base64 头部
			const base64 = base64Data.replace(/^data:image\/\w+;base64,/, '')
			const filePath = `${wx.env.USER_DATA_PATH}/mindmap_${Date.now()}.png`
			const buffer = uni.base64ToArrayBuffer(base64)

			// 写文件
			await new Promise((resolve, reject) => {
				const fs = wx.getFileSystemManager()
				fs.writeFile({
					filePath,
					data: buffer,
					encoding: 'binary',
					success() {
						resolve()
					},
					fail(err) {
						reject(err)
					}
				})
			})

			// 保存到相册
			await new Promise((resolve, reject) => {
				wx.saveImageToPhotosAlbum({
					filePath,
					success(res) {
						resolve(res)
					},
					fail(err) {
						reject(err)
					}
				})
			})

			uni.showToast({
				title: '保存成功',
				icon: 'success'
			})
		} catch (err) {
			console.error('保存图片失败:', err)
			uni.showToast({
				title: '保存失败',
				icon: 'error'
			})
		}
	}

	onLoad((options) => {
		// 从路由参数获取 taskId
		if (options.mindData) {
			// mindData.value = JSON.parse(options.mindData)
			taskId.value = options.mindData
			userId.value = options.userId	
		}
	})

	onMounted(async () => {
		if (!taskId.value) return
		htmlUrl.value = `${htmlUrl.value}?data=${taskId.value}&userId=${userId.value}`;
		console.log('URL:', htmlUrl.value);
		
		// 🔥 监听导出结果 - 简化版本
		uni.$on('exportResult', (result) => {
			console.log('收到导出结果:', result);
			
			// 直接显示结果提示
			if (result.success) {
				uni.showToast({
					title: result.message || '操作成功',
					icon: 'success',
					duration: 3000
				});
			} else {
				uni.showToast({
					title: result.message || '操作失败', 
					icon: 'error',
					duration: 3000
				});
			}
			
			// 🔥 简化：不再尝试设置 hash，因为导出功能已经完成
			// H5 端的监听可以通过其他方式处理，或者简单忽略
			console.log('导出操作完成，结果已显示给用户');
		});
	});

	//  添加页面卸载时的清理
	onUnmounted(() => {
		uni.$off('exportResult');
	});
</script>

<style>
	.container {
		width: 100%;
		height: 100vh;
	}
</style>